<template>
  <div class="app">
    <div>app</div>
    <ul class="nav">
      <li>
        <!-- router-link  to指定链接的路径   本质是a 链接 -->
        <router-link to="/shouye">首页</router-link>
      </li>
      <li>
        <!-- router-link to可以变为动态 对应的值为对象，对象的属性为name时，对应的值是路由组件的名字
        对象的值为path时，对应的是路由组件的路径
         -->
        <router-link :to="{ name: 'fenlei' }">分类</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/car' }">购物车</router-link>
      </li>
      <li>
        <router-link to="/personcenter">个人中心</router-link>
      </li>
    </ul>
    <!-- 路由内容显示的位置 -->
    <!-- <router-view></router-view> -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <!-- <keep-alive>
    </keep-alive>
    缓存路由组件对象
    默认情况下，是路由组件的销毁与重建，而包了缓存路由组件的组件，显示与隐藏，可以提高用户体验

    注：对数据要求实时性比较高的情况下，就不要使用，要求不高时可以使用
    
     -->
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  components: {},
  methods: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  justify-content: space-around;
  li {
    a {
      text-decoration: none;
      color: black;
    }
    /*  a:visited {
      color: pink;
    }
    a:active {
      color: blue;
    }
    a:link {
      color: black;
    } */
    // 导航的高亮显示
    .router-link-active {
      color: red;
    }
  }
}
</style>